<template>
  <div class="mod-config">

    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item label="类型">
        <el-select v-model="dataForm.key" placeholder="类型">
          <el-option key="quanbu" label="全部" value=""></el-option>
          <el-option key="gangyubaobiao" label="刚玉报表" value="刚玉报表"></el-option>
          <el-option key="fulebaobiao" label="富勒报表" value="富勒报表"></el-option>
          <el-option key="jdebaobiao" label="JDE报表" value="JDE报表"></el-option>
          <el-option key="gangyudb" label="刚玉DB" value="刚玉DB"></el-option>
          <el-option key="fuledb" label="富勒DB" value="富勒DB"></el-option>
          <el-option key="JDEDB" label="JDEDB" value="JDEDB"></el-option>
          <el-option key="外部JDEDB" label="外部JDEDB" value="外部JDEDB"></el-option>
          <el-option key="外部WMSDB" label="外部WMSDB" value="外部WMSDB"></el-option>
          <el-option key="开未发JDEDB" label="开未发JDEDB" value="开未发JDEDB"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
        <el-button type="danger" @click="deleteHandle()">删除</el-button>
        <el-button type="danger" @click="deleteAll()">删除全部</el-button>
        <el-button type="primary" @click="importExcel(1)" :loading="isShowLoading">导入刚玉</el-button>
        <el-button type="primary" @click="importExcel(2)" :loading="isShowLoading">导入富勒</el-button>
        <el-button type="primary" @click="importExcel(3)" :loading="isShowLoading">导入JDE</el-button>
        <el-button type="success" @click="capture()" :loading="isShowLoading">抓取</el-button>
        <el-button type="warning" @click="compare()" :loading="isShowLoading">比对</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
              style="width: 100%;">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="id" header-align="center" align="center" label="ID"></el-table-column>
      <el-table-column prop="code" header-align="center" align="center" label="代码"></el-table-column>
      <el-table-column prop="name" header-align="center" align="center" label="名称"></el-table-column>
      <el-table-column prop="spec" header-align="center" align="center" label="规格"></el-table-column>
      <el-table-column prop="batch" header-align="center" align="center" label="规格"></el-table-column>
      <el-table-column prop="numOriginal" header-align="center" align="center" label="原始数量"></el-table-column>
      <el-table-column prop="unitOriginal" header-align="center" align="center" label="原始单位"></el-table-column>
      <el-table-column prop="numNow" header-align="center" align="center" label="当前数量"></el-table-column>
      <el-table-column prop="unitNow" header-align="center" align="center" label="当前单位"></el-table-column>
      <el-table-column prop="fromDb" header-align="center" align="center" label="数据来源"></el-table-column>
      <el-table-column prop="updateTime" header-align="center" align="center" label="更新时间"></el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
<!--          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>-->
          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                   :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
                   layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>

    <el-dialog :visible.sync='dialogShow' :close-on-click-modal='false' :close-on-press-escape='false'>
      <div align="center">
        <p class='tips'>请添加您需要导入的文件</p>
        <el-upload class='upload-demo' ref='upload' drag action='#'
                   :on-remove='handleRemove'
                   :on-exceed='handleExceed'
                   :on-change='handleChange'
                   accept='.xlsx,.xls'
                   :limit='1'
                   :file-list='fileList'
                   :auto-upload='false'>
          <i class='el-icon-upload'></i>
          <div class='el-upload__text'>将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </div>
      <span slot='footer' class='dialog-footer'>
<!--        <el-button @click='downloadTemplate'>下载模版</el-button>-->
        <el-button type='primary' @click='submitUpload' :loading='isShowLoading'>导入</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import AddOrUpdate from './wmsdata-add-or-update'
import {fileDownload, importExcel, pendFormData} from "../../../utils/httpRequest";

export default {
  data() {
    return {
      dataForm: {
        key: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      isShowLoading: false,
      dialogShow: false,
      fileList: [],
      importType: null,
    }
  },
  components: {
    AddOrUpdate
  },
  activated() {
    this.getDataList()
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('wms/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
          'key': this.dataForm.key
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle(id) {
      var ids = id ? [id] : this.dataListSelections.map(item => {
        return item.id
      })
      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('wms/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
    // 删除
    deleteAll(id) {
      this.$confirm(`确定删除全部数据吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('wms/deleteAll'),
          method: 'post'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
    importExcel(type) {
      this.importType = type
      this.dialogShow = true;
    },
    // 摘取
    capture() {
      this.isShowLoading = true
      this.$http({
        url: this.$http.adornUrl('wms/capture'),
        method: 'post',
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
          this.$message.error(data.msg)
        }
      }).finally(() => {
        this.isShowLoading = false
      })
    },
    // 比对
    compare() {
      this.isShowLoading = true
      this.$http({
        url: this.$http.adornUrl('wms/compare'),
        method: 'post',
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
          this.$message.error(data.msg)
        }
      }).finally(() => {
        this.isShowLoading = false
      })
    },
    submitUpload() {
      // 如果上传的文件列表是空的，给出提示
      if (this.fileList.length === 0) {
        return this.$message.warning('请先选择要上传的文件');
      }
      // 因为我们限制一次只上传1个文件，所以取数组里的第一个就可以了
      let file = this.fileList[0];
      // 获取到文件的后缀以便于判断文件类型
      let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
      // 判断文件类型
      console.log(extension)
      if (extension !== 'xlsx' && extension !== 'xls') {
        this.$message.warning('只能上传后缀是xlsx或xls的文件');
        return;
      }
      this.isShowLoading = true
      let formData = new FormData();
      pendFormData(formData, 'file', file);
      pendFormData(formData, 'type', this.importType);
      importExcel(this.$http.adornUrl('wms/importExcel'), formData).then(res => {
        if (res.data.code === 10001) {
          this.pageIndex = 1;
          this.getDataList();
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(error => {
        this.$message.error(error.toLocaleString())
      }).finally(() => {
        this.isShowLoading = false
      })
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    handleChange(file, fileList) {
      this.fileList.push(file.raw);
    },
    handleExceed(file, fileList) {
      return this.$message.warning('一次只能上传一个文件哦~');
    },
    downloadTemplate() {
      fileDownload(this.$http.adornUrl('wms/downloadTemplate'), new FormData());
    }
  }
}
</script>
